<template>
    <Modal class="privace-wrap" v-model="visible" @close="closePage">
        <div class="privance">
            <!-- <div class="header">
                <img @click="closePage('close')" src="~@/assets/imgs/icon-close-dark.png" alt="">
            </div> -->
            <div class="title">
                MoreGold Loan Agreement
            </div>
            <div class="content" v-html="privacy"></div>
            <div class="btn-box">
                <button class="btn-ui" @click="closePage('confirm')">Confirm</button>
            </div>
        </div>
    </Modal>
</template>

<script>
import Modal from '@/components/Modal'
export default{
    data(){
        return{
            privacy:'',
            visible: false
        }
    },
    props: {
      value: false,
      coin: false,
      fees: {
          type: Object,
          default: () => {
              return null
          }
      }
  },
    components:{
        Modal
    },
    watch: {
      value: {
          handler (val) {
              this.visible = val
          },
          immediate: true
      }
  },
    methods:{
        closePage(type){
            this.$emit('closePage',{type:type})
            this.$emit('input', false)
            this.$emit('closePage',{type:type})
            this.visible = false
        },
        getPrivance(){
            const params = {
                systemName: 'app',
                module: 'app_setting',
                function: 'loan_agreement',
                key: 'loan_agreement',
                status: '0',
            };
            this.$api.getAppSettingOne(params).then(res => {
                const { status, error, data } = res;
                if ('1' === status && ('00000000' === error || '0000' === error) && data) {
                    this.privacy = data.value;
                }
            });
        }
    },
    created(){
        this.getPrivance()
    }
}
</script>
<style lang="scss">
.privace-wrap {
    .modal-content {
        overflow: hidden;
    }
  .privance {
    .header {
      position: absolute;
      top: 12px;
      right: 15px;
      img {
        width: 40px;
        height: 40px;
      }
    }

    .title {
      font-size: 36px;
      text-align: center;
      font-weight: bold;
    }

    .content {
      margin-top: 20px;
      height: 630px;
      overflow: scroll;
      width: 100%;

      color: #222222;
      font-size: 32px;
      font-weight: 400;
      line-height: 60px;
    }
    .btn-ui {
        width: 100%;
        display: block;
    }
    // .btn-box {
    //   position: absolute;
    //   bottom: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 140px;
    //   text-align: center;
    //   padding: 25px 0;

    //   .btn-ui {
    //     width: 610px;
    //     height: 90px;
    //     line-height: 88px;
    //     text-align: center;
    //     background: #5A72F6;
    //     border-radius: 92px;
    //     color: #FFFFFF;
    //     font-size: 40px;
    //     font-weight: 500;

    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     margin-left: 20px;
    //   }
    // }
  }
}
</style>
